import React, { useEffect, useState } from 'react'
import notify from '../assets/images/notice.gif'
import { useTranslation } from 'react-i18next'

function NotifyCom() {
  const {t}=useTranslation() 
  const [flag,setFlag]=useState(false)
  useEffect(()=>{
    //1.定义更新状态的函数
    const updateFlag=()=>{
      setFlag(localStorage.getItem('theme')==='en') 
      // 2.初始化语言状态
     updateFlag()

     // 3.监听语言变化 
     const handleLocaleLang=()=>updateFlag() 
     window.addEventListener('local-storage-langChange',handleLocaleLang)
      
     window.addEventListener('storage', updateFlag);

    // 清理事件监听
    return () => {
      window.removeEventListener('storage', updateFlag);
      window.removeEventListener('local-storage-langChange', handleLocaleLang);
    };
    }
  },[])
  
  return (
    <div style={{display:'flex',alignItems:'center'}}>
      
          <p   style={{
         width:"{flag ? '460px':'260px'}",
         height:"50px",
         lineHeight:"50px",
         textAlign:"center",
         background:"#fbf0cb",
         color:"#000",
         borderRadius:"20px 10px 5px 20px",
         margin:'0px 10px'
       }}>{t('notify')}</p>
      
      
       <img src={notify} alt=""  style={{width:'80px',height:'80px',borderRadius:'50%'}}/>

     
    </div>
  )
}

export default NotifyCom
